import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, Icon, WhiteSpace, Modal } from 'antd-mobile';
import styles from './common.css';
import BasicProfile from './pages/personal/basicProfile/basicProfile';
import PartTimeNav from './pages/personal/partTimeNav/partTimeNav';
import CustItem from '../../../common/items/CustomsItemBadge';
import DeleteBtnAlert from '../../../common/alert/deleteBtnAlert/deleteBtnAlert';
import CustBtn from '../../../common/buttons/Btn';

const myResumeIcon = require('../../../icons/personal/my-resume-icon.png');
const jobIntentionIcon = require('../../../icons/personal/job-intention-icon.png');
const checkRealNameIcon = require('../../../icons/personal/check-real-name-icon.png');
const invitationCodeIcon = require('../../../icons/personal/invitation-code-icon.png');
const setUpPasswordIcon = require('../../../icons/personal/set-up-password-icon.png');
const feedbackIcon = require('../../../icons/personal/feeback-icon.png');
const contactServiceIcon = require('../../../icons/personal/contact-service-icon.png');
const aboutIcon = require('../../../icons/personal/about-icon.png');
const noAvatar = require('../../../assets/avatar.jpg')
const myResumeIcon2 = require('../../../icons/personal/my-resume.png');

import FootBtn from '../../../common/buttons/Btn';
import token from '../../../framework/utils/token';

const alert = Modal.alert;

function Personal({dispatch,personal }) {
  //回到顶部
  // window.scrollTo(0, 0);

  const { profile, personalData={},myBalanceInfo } = personal;
  // console.log('personalData route', personalData.profile);

  const headerArr = [
    { id: 1, title: '我的收藏', value: personalData.collect ? personalData.collect : 0, urlString:'/my-collection' },
    { id: 2, title: '我的关注', value: personalData.favor ? personalData.favor : 0, urlString:'/my-follow' },
    { id: 3, title: '我的钱包', value: myBalanceInfo ? myBalanceInfo : 0, urlString:'/my-wallet' },
    // { id: 4, title: '我的积分', value: 15, urlString:'/my-point' }
  ];

  const basicProfileProps = {
    headerArr,
    imgURL: profile.avatar,
    name: profile.name,
    onSimpleInfo(){
      dispatch(routerRedux.push({
        pathname: '/simple-info',
      }));
    },
    onViewClick(urlString){
      if (urlString == '/my-wallet') {
        dispatch({
          type:'myWallet/querySuccess',
          payload:{
            selectedIndex:0,
            billNavIndex:0
          }
        })
      } else if (urlString == '/my-point') {
        dispatch({
          type:'myPoint/querySuccess',
          payload:{
            selectedIndex:1,
            billNavIndex:0
          }
        })
      }
      // console.log(urlString);
      dispatch(routerRedux.push({
        pathname: urlString,
      }));
    }
  }

  const partTimeNav = {
    onMyPartTime(selectedIndex){
      dispatch({
        type:'myPartTime/querySuccess',
        payload:{
          selectedIndex
        }
      })
      dispatch(routerRedux.push({
        pathname: '/my-part-time',
      }));
    },
    onClickIndex(selectedIndex){
      dispatch({
        type:'myPartTime/querySuccess',
        payload:{
          selectedIndex
        }
      })
      dispatch(routerRedux.push({
        pathname: '/my-part-time',
      }));
    },
  }

  // 我的兼职；
  const PartTimeNavProps = {
    icon:myResumeIcon2,
    textName:'我的兼职',
    overflowText:'',
    overflowTextColor:'#999',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/my-part-time',
      }));
    },
  }

  //我的简历
  const myResumeProps = {
    icon:myResumeIcon,
    textName:'我的简历',
    overflowText:'',
    overflowTextColor:'#999',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/my-resume',
      }));
    },
  }

  //求职意向
  const jobIntentionProps = {
    icon:jobIntentionIcon,
    textName:'求职意向',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/job-intention',
      }));
    },
  }

  let verification = ""
  // console.log('personalData.verification',personalData.verification);
  if ( personalData.verification == "PASS" ) {
    verification = "已认证"
  } else if( personalData.verification == "AUTHENTICATING" ) {
    verification = "认证中"
  } else if( personalData.verification == "REJECT" ) {
    verification = "未通过"
  } else if( personalData.verification == "UNVERIFIED" ) {
    verification = "未认证"
  }
  // console.log('verificationverification',verification);
  //实名认证
  const checkRealNameProps = {
    icon:checkRealNameIcon,
    textName:'实名认证',
    overflowText: verification,
    overflowTextColor:'#ff9900',
    onOk(){
      // if (personalData.verification === 'UNVERIFIED' || personalData.verification === 'REJECT') {
        dispatch(routerRedux.push({
          pathname: '/check-real-name',
        }));
      // }
    },
  }

  //我的邀请码
  const invitationCodeProps = {
    icon:invitationCodeIcon,
    textName:'我的邀请码',
    onOk(){
    },
  }

  //密码设置
  const setUpPasswordProps = {
    icon:setUpPasswordIcon,
    textName:'密码设置',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/login-password',
      }));
    },
  }

  //意见反馈
  const feebackProps = {
    icon:feedbackIcon,
    textName:'意见反馈',
    onOk(){
      dispatch({
        type:'myFeedback/querySuccess',
        payload:{
          uploadImgData:[]
        }
      })
      dispatch(routerRedux.push({
        pathname: '/my-feedback',
      }));
    },
  }

  //联系客服
  const contactServiceProps = {
    icon:contactServiceIcon,
    textName:'联系客服',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/contact-service',
      }));
    },
  }

  //关于我们
  const aboutProps = {
    icon:aboutIcon,
    textName:'关于我们',
    onOk(){
      dispatch(routerRedux.push({
        pathname: '/my-about',
      }));
    },
  }

  const btnProps = {
    textValue:'退出',
    onOk(){
      console.log('退出');
      showDeleteTipsAlert()
    },
  }
  function onExit() {
  }

  const showDeleteTipsAlert =()=>{
    let isDeleteAlert;
    const isDeleteProps={
      tipsContent:'确定退出登录吗？',
      okClick(){
        console.log('ok');
        token.remove()
        let loginUrl = window.document.location.origin + '/register.html#/login'
        window.location.href = loginUrl;
        isDeleteAlert.close();
      },
      cancelClick(){
        isDeleteAlert.close();
      },
    }
    return (
      isDeleteAlert = alert('', <DeleteBtnAlert {...isDeleteProps}/>, [])
    )
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;
  const CustLine = () => <div style={{width: '100%', height:'1px', backgroundColor:'#E4E4E4'}}></div>;
  const FootHeight = () => <div style={{height: '3.125em', backgroundColor:'#F5F5F9'}}></div>;

  return(
    <div>
      <BasicProfile {...basicProfileProps} />
      <MarginHeight/>
      <PartTimeNav {...partTimeNav}/>
      <MarginHeight/>
      {/* <CustItem {...PartTimeNavProps}/>
      <MarginHeight/> */}
      <CustItem {...myResumeProps}/>
      <CustLine/>
      <CustItem {...jobIntentionProps}/>
      <CustLine/>
      <CustItem {...checkRealNameProps}/>
      <MarginHeight/>
      <CustItem {...invitationCodeProps}/>
      <MarginHeight/>
      <CustItem {...setUpPasswordProps}/>
      <CustLine/>
      <CustItem {...feebackProps}/>
      <CustLine/>
      <CustItem {...contactServiceProps}/>
      <CustLine/>
      <CustItem {...aboutProps}/>

      <div style={{margin:'1em 3em'}}>
        <CustBtn {...btnProps}/>
      </div>
      <FootHeight/>
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    personal:state.personal,

  }
}

export default connect(mapStateToProps)(Personal);
